<template>
  <div>
    <!-- 头部 -->
    <div class="worthContainernav">
      <header class="headerNavigation">
        <div class="row">
          <i class="home">
            <van-icon size="23" name="wap-home-o" />
          </i>
          <div class="txt">值得买</div>
          <div class="space"></div>
          <i class="scope">
            <van-icon size="26" name="search" />
          </i>
          <i class="cart">
            <van-icon size="26" name="cart-o" />
          </i>
        </div>
      </header>
    </div>
    <!-- 中间轮播图区域 -->
    <div class="swiperContainer">
      <div class="title">
        <img
          src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          class="zdm"
        />
        <div class="slogan">严选好物 用心生活</div>
      </div>
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe
          class="my-swipe"
          @change="onChange"
          :width="88.75"
          :loop="false"
          :stop-propagation="true"
        >
          <van-swipe-item v-for="(item, index) in newSwiperData" :key="index">
            <router-link
              to="/category"
              class="swiperItem"
              v-for="itemgoods in item"
              :key="itemgoods.id"
            >
              <div class="topContainer">
                <img :src="itemgoods.picUrl" />
              </div>
              <div class="detail">
                <div class="mainText">{{ itemgoods.mainTitle }}</div>
                <div class="descText">{{ itemgoods.viceTitle }}</div>
              </div>
            </router-link>
          </van-swipe-item>

          <template #indicator>
            <div class="custom-indicator">
              <span
                class="pagination"
                :class="{ active: isActive === 0 }"
              ></span>
              <span
                class="pagination"
                :class="{ active: isActive === 1 }"
              ></span>
              <span
                class="pagination"
                :class="{ active: isActive === 2 }"
              ></span>
              <span
                class="pagination"
                :class="{ active: isActive === 3 }"
              ></span>
            </div>
          </template>
        </van-swipe>
      </div>
    </div>
    <div class="Warppers">
      <!-- 瀑布流 -->
      <waterfall
        :col="col"
        :data="waterfallData"
        :isTransition="true"
        @loadmore="loadmore"
        @scroll="scroll"
      >
        <template>
          <div
            class="lookList"
            v-for="(item, index) in waterfallData"
            :key="index"
          >
            <div
              class="lookItem"
              v-for="itemWaterList in item.topics"
              :key="itemWaterList.topicId"
            >
              <div slot="waterfall-head" class="innerContainer">
                <div class="image">
                  <img
                    v-if="itemWaterList.picUrl"
                    :src="itemWaterList.picUrl"
                    alt="加载错误"
                  />
                </div>
                <div class="lookDesc">
                  {{ itemWaterList.title }}
                </div>
                <div class="lookDetail">
                  <div class="userInfo">
                    <img :src="itemWaterList.avatar" alt="" />
                    <div class="userName">{{ itemWaterList.nickname }}</div>
                  </div>
                  <div class="upArea">
                    <img
                      src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                      alt=""
                    />
                    <div class="upText">
                      {{ parseInt(itemWaterList.readCount / 1000) }}k
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script>
import { reqWorthBannerData, reqWorthWaterfallData } from "../../api/index";
export default {
  name: "Worth",
  data() {
    return {
      isActive: 0, // 轮播指示器位置
      swiperData: [], //轮播图数据
      newSwiperData: [], //整理过得新轮播图数据
      waterfallData: [], //瀑布流数据,
      col: 2, //瀑布流的列数
      page: 2,
      size: 2,
      newWaterFallData: [], //新瀑布流数据
    };
  },
  methods: {
    // 切换轮播图
    onChange(index) {
      this.isActive = index;
    },
    // 获取滚动时的event对象
    scroll(scrollData) {
      //  console.log(scrollData);
    },
    //  滚动到底部触发
    loadmore(page) {
      //   console.log(this.page, this.size);
      this.page += 1;
      this.size += 1;
      this.getNewWaterFallData(this.page, this.size);
    },

    // 获取轮播图数据
    async getBannerData() {
      let res = await reqWorthBannerData();
      //  console.log(res);
      // 判断是否获取成功
      if (res.code === "200") {
        this.swiperData = res.data.navList;
        for (let i = 0; i < this.swiperData.length; i += 2) {
          this.newSwiperData.push(this.swiperData.slice(i, i + 2));
        }
      }
    },
    // 获取瀑布流数据
    async getWaterFallData() {
      let res = await reqWorthWaterfallData(this.page, this.size);
      if (res.code === "200") {
        this.waterfallData = res.data.result;
        if (this.newWaterFallData) {
          this.waterfallData = this.waterfallData.concat(this.newWaterFallData);
        }
      } else {
        console.log(res.message);
      }
    },
    // 触底后获取新瀑布流数据
    async getNewWaterFallData() {
      let res = await reqWorthWaterfallData(this.page, this.size);
      if (res.code === "200") {
        this.newWaterFallData = res.data.result;
        this.waterfallData = this.waterfallData.concat(this.newWaterFallData);
      } else {
        console.log(res.message);
      }
    },
  },
  mounted() {
    this.getBannerData();
    this.getWaterFallData();
  },
};
</script>

<style lang="less" scoped>
.swiperContainer {
  width: 100%;
  height: 345px;
  background-image: url(http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #eee;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  .title {
    margin-top: 30px;
    position: absolute;
    img {
      width: 65px;
      position: absolute;
    }
    .slogan {
      font-size: 16px;
      color: #fff;
      height: 22px;
      width: 145px;
      line-height: 22px;
      position: absolute;
      left: 73px;
      top: 10px;
    }
  }
  .swiper {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    width: 355px;
    height: 270x;
    border-radius: 10px;
    .my-swipe .van-swipe-item {
      width: 88.75px;
      height: 100%;
      padding-top: 18px;
      .swiperItem {
        display: block;
        width: 84px;
        height: 100px;

        .topContainer {
          width: 60px;
          height: 60px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .bottomItem {
        margin-top: 14px;
      }
      .detail {
        width: 84px;
        height: 36px;
        margin-top: 4px;
        text-align: center;

        .mainText {
          font-size: 14px;
          font-weight: 700;
          color: #333;
        }
        .descText {
          font-size: 12px;
          color: #999;
        }
      }
    }
    .custom-indicator {
      width: 100%;
      height: 16px;
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .pagination {
        background-color: #d9d9d9;
        width: 20px;
        height: 2px;
      }
      .active {
        background-color: #dd1a21;
      }
    }
  }
}
.worthContainernav {
  height: 50px;
  width: 375px;
  .row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    line-height: 50px;
    justify-content: space-between;
    .home {
      display: block;
      width: 23px;
      height: 50px;
      margin-left: 10px;
    }
    .txt {
      margin-left: 75px;
      font-size: 20px;
    }
    .scope {
      margin-right: -35px;
    }
    .cart {
      margin-right: 15px;
    }
  }
}
.Warppers {
  width: 100%;
  align-items: center;
  background-color: #eee;
  box-sizing: border-box;
  padding: 15px 10px 0 10px;
  display: flex;
  justify-content: space-between;
  .lookList {
    min-height: 500px;
    width: 172.5px;
    background-color: #eee;
    .lookItem .innerContainer {
      width: 100%;
      margin-bottom: 10px;
      border-radius: 10px;
      overflow: hidden;
      background-color: #fff;
      .image img {
        width: 100%;
      }
      .lookDesc {
        padding: 9px 8px 0;
        font-size: 14px;
        color: #333;
        line-height: 20px;
        flex-wrap: warp;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .lookDetail {
        display: flex;
        font-size: 12px;
        padding: 8.5px 8px 12px;
        justify-content: space-between;
        .userInfo {
          display: flex;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
          }
          .userName {
            margin-left: 4px;
          }
        }
        .upArea {
          display: flex;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
          }
          .upText {
            margin-left: 1px;
            color: #7f7f7f;
          }
        }
      }
    }
  }
}
</style>